<template>
    <div>
        <h2>显示</h2>
        用户名：<input type="text" v-model="Rinfo.Name">
        <input type="button" value="查询" @click="getlist()">
        <input type="button" value="删除" @click="del">
        <input type="button" value="上线" @click="SX(0)">
        <input type="button" value="离线" @click="SX(1)">
        <input type="button" value="导出" @click="DC">
        <table border="1">
            <tbody>
                <tr>
                    <td>
                        <input type="checkbox" v-model="aaa" @change="checkall">
                    </td>
                    <td>会员ID</td>
                    <td>用户名</td>
                    <td>手机号</td>
                    <td>头像</td>
                    <td>邮箱</td>
                    <td>状态</td>
                    <td>创建日期</td>
                    <td>操作</td>
                </tr>
                <tr v-for="item in info">
                    <td>
                        <input type="checkbox" :checked="bbb" :value="item.Mid" v-model="ids" @change="reall">
                    </td>
                    <td>{{ item.Mid }}</td>
                    <td>{{ item.Name }}</td>
                    <td>{{ item.Phone }}</td>
                    <td>
                        <img :src="item.Pic" style="max-width: 70px; max-height: 70px;">
                    </td>
                    <td>{{ item.Email }}</td>
                    <td>{{ item.State==true?"在线":"离线" }}</td>
                    <td>{{ item.Date }}</td>
                    <td>
                        <input type="button" value="修改" @click="Upd(item.Mid)">
                    </td>
                </tr>
            </tbody>
        </table>
        总条数：<span>{{ date.totalCount }}</span>条
        总页数<span>{{ date.totalPage }}</span>页
        当前第<span>{{ Rinfo.index }}/{{ date.totalPage }}</span>页
        <input type="button" value="首页"@click="page(1)">
        <input type="button" value="上一页"@click="page(2)">
        <input type="button" value="下一页"@click="page(3)">
        <input type="button" value="尾页"@click="page(4)">
    </div>
</template>

<script setup lang="ts">
import {ref,reactive,onMounted}from 'vue';
import axios from 'axios';
import { useRouter } from 'vue-router';
let router=useRouter();
const info=ref([{
    Mid:0,
    Name:'',
    Pwd:'',
    Phone:'',
    Pic:'',
    Email:'',
    State:true,
    Date:''
}])

const Rinfo=ref({
    Name:'',
    index:1,
    size:2,
})

const date=ref({
    totalCount:0,
    totalPage:0
})

const page=(str:number)=>{
    switch(str){
        case 1:
            if(Rinfo.value.index==1){
                alert('已经是第一页了')
                return;
            }
            Rinfo.value.index=1;
            break;
        case 2:
            if(Rinfo.value.index==1){
                alert('已经是第一页了')
                return;
            }
            Rinfo.value.index--;
            break;
        case 3:
            if(Rinfo.value.index==date.value.totalPage){
                alert('已经是最后一页了')
                return;
            }
            Rinfo.value.index++;
            break;
        case 4:
            if(Rinfo.value.index==date.value.totalPage){
                alert('已经是最后一页了')
                return;
            }
            Rinfo.value.index=date.value.totalPage;
            break;
    }
    getlist()
}

onMounted(()=>{
    getlist();
})

const getlist=()=>{
    axios.get('https://localhost:7294/api/Member/GetMembers',{
        params:{
            name:Rinfo.value.Name,
            index:Rinfo.value.index,
            size:Rinfo.value.size
        }
    })
    .then(res=>{
        info.value=res.data.list,
        date.value.totalCount=res.data.totalCount,
        date.value.totalPage=res.data.totalPage
    })
    .catch(err=>{
        console.log(err);
    })
}

const aaa=ref(false);
const bbb=ref(false);
const ids=ref([{}]);
const checkall=()=>{
    if(aaa.value){
        bbb.value=true;
        ids.value=info.value.map(e=>e.Mid);
    }
    else{
        bbb.value=false;
        ids.value=[];
    }
}

const reall=()=>{
    if(ids.value.length==info.value.length){
        aaa.value=true;
    }
    else{
        aaa.value=false;
    }
}

const del=()=>{
    if(ids.value.length==0){
        alert("至少要选择一条");
    }
    if(confirm("确认要删除吗？")){
        axios.delete('https://localhost:7294/api/Member/Del',{
            params:{
                ids:ids.value.toString()
            }
        })
        .then(res=>{
            if(res.data>0){
                alert("删除成功");
                getlist();
            }
            else{
                alert("删除失败");
                return;
            }
        })
    }
}


const SX=(stateid:number)=>{
    if(ids.value.length==0){
        alert("至少要选择一条");
    }
    if(confirm("确认要修改吗？")){
        axios.get('https://localhost:7294/api/Member/UpdState',{
            params:{
                ids:ids.value.toString(),
                stateid:stateid
            }
        })
        .then(res=>{
            if(res.data>0){
                alert("修改成功");
                getlist();
            }
            else{
                alert("修改失败");
                return;
            }
        })
    }
}

const Upd=(id:any)=>{
    router.push({
        name:"UpdateMember",
        query:{
            id:id,
        }
    })
}

const DC=()=>{
    axios.get('https://localhost:7294/api/Member/ExeDC',{
        params:{
            fileName:"C:\\Users\\86137\\Desktop\\MonthLXQD\\会员信息.xlsx"
        }
    })
    .then(res=>{
        if(res.data>0){
            alert("导出成功");
        }
    })
}
</script>

<style scoped>

</style>